<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ShoppingMall-订单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--     <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a><cite>订单管理</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
          <input class="layui-input" placeholder="开始日" name="start" id="start">
          <input class="layui-input" placeholder="截止日" name="end" id="end">
          
          <div class="layui-input-inline">
            <select name="contrller">
              <option>支付方式</option>
              <option value="0">支付宝</option>
              <option value="1">微信</option>
              <option value="2">货到付款</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="contrller">
              <option value="">订单状态</option>
              <option value="0">待确认</option>
              <option value="1">已确认</option>
              <option value="2">已收货</option>
              <option value="3">已取消</option>
              <option value="4">已完成</option>
              <option value="5">已作废</option>
            </select>
          </div>
          <input type="text" name="username"  placeholder="请输入订单号" autocomplete="off" class="layui-input">
          <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
      </div>
      <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加订单','./order-add.html',650,525)"><i class="layui-icon"></i>添加</button>
      </xblock>
       	<table id="order-list" lay-filter="list"></table>
       	<script type="text/html" id="bar">
			  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	<script>
	
	layui.use(['table','laypage','util'], function(){
	  var table = layui.table
	  ,laypage = layui.laypage
	  ,layer = layui.layer
	  ,util = layui.util;
		 
		//执行渲染
		var tableIns = table.render({
		  elem: '#order-list' //指定原始表格元素选择器（推荐id选择器）
		  ,url: '/shoppingmall/QueryOrderServlet'
// 		  ,height: 472 //容器高度
		  ,page: true
		  ,loading: true
// 		  ,toolbal: true
		  ,cols: [[
			  {type:'numbers'}
		      ,{type: 'checkbox'}
			  ,{field:'o_id', width:110, title: '订单编号', sort: true}
		      ,{field:'o_name', width:110, title: '收货人', edit: 'text'}
		      ,{field:'o_phone', title: '手机号', edit: 'text'}
		      ,{field:'o_content', title: '商品', edit: 'text'}
		      ,{field:'o_money', width: 100, title: '金额', sort: true, edit: 'text'}
		      ,{field:'o_status', title: '订单状态', minWidth: 100,
		    	  templet : function(value){
		    		  switch(value.o_status){
		    		  case 0: return "待确认";
		    		  case 1: return "已确认";
		    		  case 2: return "已收货";
		    		  case 3: return "已取消";
		    		  case 4: return "已完成";
		    		  case 5: return "已作废";
		    		  default: return "无效";
		    		  }
		      }} 
		      ,{field:'o_pay_method', title: '支付方式', 
		    	  templet : function(value){
		    		  switch(value.o_pay_method){
		    		  case 0: return "支付宝";
		    		  case 1: return "微信";
		    		  case 2: return "货到付款";
		    		  default: return "无效";
		    		  }
		    	  }}
		      ,{field:'o_time', title: '下单时间', sort: true}
		      ,{fixed: 'right', width: 80, align:'center', toolbar: '#bar'} //这里的toolbar值是模板元素的选择器
		  ]]
		});
		
		
		//监听单元格编辑
		  table.on('edit(list)', function(obj){
		    var value = obj.value //得到修改后的值
		    ,data = obj.data //得到所在行所有键值
		    ,field = obj.field; //得到字段
		    
		    console.log(data);
		    $.ajax({ 
            	url: '/shoppingmall/UpdateOrderServlet',
            	method: 'post',
            	//往后台发送的是data.field，即一个{name：value}的数据结构
            	data: data,
            	async: true,
            	success: function (data) {
            		if(data.code == 0)
            			layer.msg('【ID ' + data.msg + '】' + '修改成功！', {icon: 1, time: 1000});
            		else
            			layer.msg('【ID ' + data.msg + '】' + '修改失败！', {icon: 2, time: 2000});
            	},
            	error: function (data){
            		layer.msg('服务器繁忙！', {icon: 2, time: 1000});
            	}
        	});
            return false;
		  });
		
			//工具条事件
	      table.on('tool(list)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	        var data = obj.data; //获得当前行数据
	        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	        console.log(obj);
	       
	        if(layEvent == 'del'){ //删除
	          layer.confirm('确认删除吗?', function(index){
	            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	            layer.close(index);
	            
	            //向服务端发送删除指令
	             $.ajax({ 
	            	url: '/shoppingmall/DeleteOrderServlet',
	            	method: 'post',
	            	//往后台发送的是data.field，即一个{name：value}的数据结构
	            	data: obj.data,
	            	async: true,
	            	success: function (data) {
	            		if(data.code == 0)
	            			layer.msg('【ID ' + data.msg + '】' + '删除成功！', {icon: 1, time: 1000});
	            		else
	            			layer.msg('【ID ' + data.msg + '】' + '删除失败！', {icon: 2, time: 2000});
	            	},
	            	error: function (data){
	            		layer.msg('服务器繁忙！', {icon: 2, time: 1000});
	            	}
	        	});
	            return false;
	          });
	        }
	      });
		
		});
		</script>      
        
    </div>
    <script>
      layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });
      

      function delAll (argument) {
        var data = tableCheck.getData();
        layer.confirm('确认要删除吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }
    </script>
 </body>
</html>